<template>
  <div class="card flex-1">
    <h2 class="text-lg font-bold">产业纵览</h2>
    <div class="flex">
      <!-- 左侧产业列表 -->
      <div class="w-full lg:w-3/5 bg-white">
        <ul class="space-y-3">
          <li
            v-for="(industry, index) in currentIndustryData"
            :key="index"
            class="flex items-center justify-between p-2 hover:bg-gray-50 rounded transition-colors"
          >
            <div class="flex items-center">
              <span
                class="w-3 h-3 rounded-full mr-2"
                :style="{ backgroundColor: industry.color }"
              ></span>
              <span>{{ industry.name }}</span>
            </div>
            <div class="text-right">
              <span class="font-semibold"
                >{{ industry.value.toLocaleString() }}<span class="unit">亿元</span></span
              >
            </div>
          </li>
        </ul>
      </div>

      <!-- 右侧环形图 -->
      <div class="w-full lg:w-2/5 bg-white text-center">
        <div class="flex flex-col mb-4 pl-4 pr-4">
          <h3 class="font-semibold">产业结构占比</h3>
          <div class="text-sm text-gray-500">
            总计: {{ totalValue.toLocaleString() }}<span class="unit">亿元</span>
          </div>
        </div>
        <div class="relative h-80">
          <canvas ref="industryChartRef"></canvas>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUpdated, watch, defineProps, computed } from 'vue'
import { Chart } from 'chart.js'

const props = defineProps({
  yearStr: String,
})

// 产业占比数据
const resList = ref({
  2024: [
    { name: '工业', value: 2376.03, color: '#4BC0C8' },
    { name: '建筑业', value: 515.71, color: '#FF6B6B' },
    { name: '农林牧渔业', value: 129.69, color: '#85D893' },
    { name: '批发和零售业', value: 71.3, color: '#FFD662' },
    { name: '交通运输、仓储和邮政业', value: 341.73, color: '#36A2EB' },
    { name: '住宿和餐饮业', value: 316.23, color: '#FF9F43' },
    { name: '金融业', value: 171.69, color: '#7474BF' },
    { name: '房地产业', value: 1128.94, color: '#FF5563' },
    { name: '其他服务业', value: 396.23, color: '#9966FF' },
  ],
  2023: [
    { name: '工业', value: 2976.03, color: '#4BC0C8' },
    { name: '建筑业', value: 515.71, color: '#FF6B6B' },
    { name: '农林牧渔业', value: 249.69, color: '#85D893' },
    { name: '批发和零售业', value: 32.3, color: '#FFD662' },
    { name: '交通运输、仓储和邮政业', value: 311.73, color: '#36A2EB' },
    { name: '住宿和餐饮业', value: 246.23, color: '#FF9F43' },
    { name: '金融业', value: 139.69, color: '#7474BF' },
    { name: '房地产业', value: 1118.94, color: '#FF5563' },
    { name: '其他服务业', value: 316.23, color: '#9966FF' },
  ],
  2022: [
    { name: '工业', value: 2516.03, color: '#4BC0C8' },
    { name: '建筑业', value: 515.71, color: '#FF6B6B' },
    { name: '农林牧渔业', value: 141.69, color: '#85D893' },
    { name: '批发和零售业', value: 22.3, color: '#FFD662' },
    { name: '交通运输、仓储和邮政业', value: 241.73, color: '#36A2EB' },
    { name: '住宿和餐饮业', value: 316.23, color: '#FF9F43' },
    { name: '金融业', value: 129.69, color: '#7474BF' },
    { name: '房地产业', value: 1178.94, color: '#FF5563' },
    { name: '其他服务业', value: 316.23, color: '#9966FF' },
  ],
  2021: [
    { name: '工业', value: 2516.03, color: '#4BC0C8' },
    { name: '建筑业', value: 541.71, color: '#FF6B6B' },
    { name: '农林牧渔业', value: 141.69, color: '#85D893' },
    { name: '批发和零售业', value: 32.3, color: '#FFD662' },
    { name: '交通运输、仓储和邮政业', value: 241.73, color: '#36A2EB' },
    { name: '住宿和餐饮业', value: 246.23, color: '#FF9F43' },
    { name: '金融业', value: 119.69, color: '#7474BF' },
    { name: '房地产业', value: 1118.94, color: '#FF5563' },
    { name: '其他服务业', value: 396.23, color: '#9966FF' },
  ],
  2020: [
    { name: '工业', value: 2576.03, color: '#4BC0C8' },
    { name: '建筑业', value: 545.71, color: '#FF6B6B' },
    { name: '农林牧渔业', value: 149.69, color: '#85D893' },
    { name: '批发和零售业', value: 72.3, color: '#FFD662' },
    { name: '交通运输、仓储和邮政业', value: 341.73, color: '#36A2EB' },
    { name: '住宿和餐饮业', value: 346.23, color: '#FF9F43' },
    { name: '金融业', value: 179.69, color: '#7474BF' },
    { name: '房地产业', value: 1158.94, color: '#FF5563' },
    { name: '其他服务业', value: 346.23, color: '#9966FF' },
  ],
})

// 计算总价值
const totalValue = computed(() => {
  return resList.value[props.yearStr]?.reduce((sum, industry) => sum + industry.value, 0) || 0
})

// 当前年份的产业数据
const currentIndustryData = computed(() => {
  return resList.value[props.yearStr] || []
})

// 图表实例
let industryChart = null
const industryChartRef = ref(null)

// 初始化或更新图表
const initOrUpdateChart = () => {
  if (!industryChartRef.value || !currentIndustryData.value.length) return

  const ctx = industryChartRef.value.getContext('2d')

  // 销毁已存在的图表实例
  if (industryChart) {
    industryChart.destroy()
  }

  // 计算百分比
  const dataWithPercentage = currentIndustryData.value.map((industry) => {
    const percentage = ((industry.value / totalValue.value) * 100).toFixed(1)
    return { ...industry, percentage }
  })

  // 创建新的图表
  industryChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
      labels: dataWithPercentage.map((industry) => industry.name),
      datasets: [
        {
          data: dataWithPercentage.map((industry) => industry.value),
          backgroundColor: dataWithPercentage.map((industry) => industry.color),
          borderWidth: 0,
          hoverOffset: 10,
        },
      ],
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      cutout: '50%',
      plugins: {
        legend: {
          display: false,
        },
        tooltip: {
          backgroundColor: 'rgba(255, 255, 255, 0.95)',
          titleColor: '#333',
          bodyColor: '#666',
          borderColor: 'rgba(0, 0, 0, 0.1)',
          borderWidth: 1,
          padding: 10,
          boxPadding: 5,
          usePointStyle: true,
          callbacks: {
            label: function (context) {
              const label = context.label
              const value = context.raw
              const percentage = ((value / totalValue.value) * 100).toFixed(1)
              return `${label}: ${value.toLocaleString()}亿元 (${percentage}%)`
            },
          },
        },
      },
      animation: {
        animateRotate: true,
        animateScale: true,
        duration: 1000,
        easing: 'easeOutQuart',
      },
    },
  })
}

// 监听年份变化
watch(props.yearStr, () => {
  initOrUpdateChart()
})

onMounted(() => {
  initOrUpdateChart()
})

onUpdated(() => {
  initOrUpdateChart()
})
</script>

<style scoped>
.card {
  font-size: 14px;
}
</style>
